<template>
    <div class="wage-calculator">
        <h1>牛马收益</h1>
        <div class="calculator-container">
            <div class="icon-container">
                <img src="../../assets/img/indexImg5.jpg" alt="钱袋图标" class="icon" />
                <div class="dashed-line"></div>
                <img src="../../assets/img/indexImg5.jpg" alt="钱袋图标" class="icon" />
            </div>
            <p class="status">正在上班中</p>
            <p class="time">{{ formattedTime }}</p>
            <p class="earned">已赚: ¥ {{ earned.toFixed(2) }}</p>
            <button @click="clockOut" class="clock-out-button">下班</button>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                startTime: null,
                timer: null,
                earned: 0,
                secondsPerHour: 3600,
                // 添加一个动态数据，用于触发计算属性更新
                tick: 0 
            };
        },
        computed: {
            formattedTime() {
                // 让计算属性依赖 tick 变量
                const _ = this.tick; 
                if (!this.startTime) return '00:00:00:00';
                const totalSeconds = Math.floor((Date.now() - this.startTime) / 1000);
                const days = Math.floor(totalSeconds / 86400);
                const hours = Math.floor((totalSeconds % 86400) / 3600);
                const minutes = Math.floor((totalSeconds % 3600) / 60);
                const seconds = totalSeconds % 60;
                return `${days.toString().padStart(2, '0')}:${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            }
        },
        created() {
            const {
                monthlySalary,
                dailyWorkHours,
                workDays
            } = this.$route.query;
            if (!monthlySalary || !dailyWorkHours || !workDays) {
                window.alert('检测到输入数据有空值，请返回重新输入。');
                this.$router.back();
                return;
            }
            // 验证输入是否为数字
            if (isNaN(monthlySalary) || isNaN(dailyWorkHours) || isNaN(workDays)) {
                window.alert('检测到输入数据不是数字，请返回重新输入。');
                this.$router.back();
                return;
            }
            // 验证 dailyWorkHours 在 0 - 24 之间
            if (parseFloat(dailyWorkHours) < 0 || parseFloat(dailyWorkHours) > 24) {
                window.alert('每天工作小时数必须在 0 - 24 之间。');
                this.$router.back();
                return;
            }
            // 验证 workDays 在 0 - 32 之间
            if (parseFloat(workDays) < 0 || parseFloat(workDays) > 32) {
                window.alert('当月上班天数必须在 0 - 32 之间。');
                this.$router.back();
                return;
            }
            console.log('月薪:', monthlySalary);
            console.log('每天工作小时数:', dailyWorkHours);
            console.log('当月上班天数:', workDays);

            this.startTime = Date.now();
            const salaryPerSecond = (parseFloat(monthlySalary) / (parseFloat(dailyWorkHours) * parseFloat(workDays) *
                this.secondsPerHour));

            this.timer = setInterval(() => {
                this.earned += salaryPerSecond;
                // 每秒更新 tick，触发计算属性重新计算
                this.tick++; 
            }, 1000);
        },
        methods: {
            clockOut() {
                clearInterval(this.timer);
                // 这里可以添加下班后续逻辑，例如跳转到其他页面
            }
        },
        beforeDestroy() {
            clearInterval(this.timer);
        }

    };
</script>

<style scoped>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .wage-calculator {
        width: 100vw;
        height: 100vh;
        background-color: #888;
        padding: 20px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    h1 {
        color: white;
        width: 548px;
        height: 157px;
        font-size: 100px;
        font-family: STXinwei;
    }

    .calculator-container {
        width: 80%;
        height: 80%;
        background-color: white;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .icon-container {
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .icon {
        width: 150px;
        height: 140px;
    }

    .dashed-line {
        flex-grow: 1;
        border-bottom: 10px dashed black;
        margin: 0 10px;
    }

    .status {
        width: 100%;
        height: 80px;
        color: #f0c040;
        font-size: 64px;
        /* margin-bottom: 10px; */
    }

    .time {
        width: 100%;
        height: 200px;
        color: #f0c040;
        font-size: 144px;
        /* margin-bottom: 10px; */
    }

    .earned {
        width: 100%;
        height: 150px;
        color: #f0c040;
        font-size: 96px;
        /* margin-bottom: 20px; */
    }

    .clock-out-button {
        width: 290px;
        height: 90px;
        font-size: 50px;
        background-color: #f0c040;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 20px;
        cursor: pointer;
    }
</style>